<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
  </style>
</head>
<body>
  <div class="box">
    这是一个盒子
  </div>
</body>
<script>
  var box = document.querySelector(".box");
  var clientW = document.documentElement.clientWidth;
  var clientH = document.documentElement.clientHeight;
  var boxW = box.offsetWidth;
  var boxH = box.offsetHeight;

  box.onmousedown = function(eve){
    // 获取按下时的事件对象
    var downE = eve || window.event;

    // 阻止按下的默认事件，防止移动时选中文字
    downE.preventDefault();

    document.onmousemove = function(eve){
      // 获取移动时的事件对象
      var moveE = eve || window.event;
      // 元素当前位置 = 相对于页面的坐标 - 按下时相对于元素的坐标
      var l = moveE.pageX - downE.offsetX;
      var t = moveE.pageY - downE.offsetY;

      // 边界限定
      if(l < 0) l = 0;
      if(t < 0) t = 0;
      if(l > clientW - boxW) l = clientW - boxW;
      if(t > clientH - boxH) t = clientH - boxH;

      // 将计算处理好的位置，设置到元素
      box.style.left = l + "px";
      box.style.top = t + "px";
    }
    document.onmouseup = function(){
      // 清除移动事件
      document.onmousemove = null;
    }
  }

  console.log(1)
  console.log(1)
</script>
</html>